<template>
  <div class="container_vert content">
    <Box :show-header="false" class="table">
      <SortTable :columns="table.header" :data="table.data" class="table_content" @rowClick="rowClick"/>
    </Box>
    <Box :show-header="false" class="line">
      <ul class="chart_tab">
        <template v-for="(name, index) in chart.list" :key="index">
          <li @click="changeChart(index)" :class="[currentChartIndex === index?'checked':'']">{{ name }}</li>
          <div v-if="index !== chart.list.length - 1" class="divider"></div>
        </template>
      </ul>
      <LineChart
        class="chart_content"
        :x-axis="chart.xAxis"
        :data="chart.data"
        :serie-name="chart.name"/>
    </Box>
    <FlowModel ref="refFlowModel">
      <Box title="路口-交通流量监测" style="width: 100%;height:100%;">
        <svg @click="closeFlowModel" t="1658212580620" class="close" viewBox="0 0 1045 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2260" width="18" height="18"><path d="M282.517333 213.376l-45.354666 45.162667L489.472 512 237.162667 765.461333l45.354666 45.162667L534.613333 557.354667l252.096 253.269333 45.354667-45.162667-252.288-253.44 252.288-253.482666-45.354667-45.162667L534.613333 466.624l-252.096-253.226667z" p-id="2261" fill="#ffffff"></path></svg>
        <MultiLineChart :legend="flowStats.legend" :data="flowStats.data" :color-array="flowStats.colorArray"></MultiLineChart>
      </Box>
    </FlowModel>
  </div>
</template>
<script setup>
import { ref, inject, reactive, onMounted } from 'vue';
import FlowModel from './FlowModel.vue';
import Box from '@/components/Box.vue';
import LineChart from '@/components/LineChart.vue';
import SortTable from '@/components/SortTable.vue';
import MultiLineChart from '@/components/MultiLineChart.vue';
import { getYesterdayDateStr } from '@/utils/util';
import axios from 'axios';
import { history, trafficVolume, saturability, balance, congestion, queueLength, congestionTime, volumeHis, volumePre} from '@/api/crossing';
//事件总线
const EventBus = inject('EventBus');
//默认请求日期昨日
const yesterdayStr = getYesterdayDateStr();
//请求时间参数
const queryTime = ref({
  startTime: yesterdayStr + ' 00:00:00',
  endTime: yesterdayStr + ' 23:59:59'
});
//监听请求时间变化
EventBus.on('timequery', ({ startTime, endTime }) => {
  queryTime.value.startTime = startTime;
  queryTime.value.endTime = endTime;
  getTableData();
  getChartData();
});
//流量弹窗组件
const refFlowModel = ref(null);
//当前选中的图表索引
const currentChartIndex = ref(0);
//当前选中的路口id
const currentCrossingId = ref(undefined);
const requestArr = [trafficVolume, saturability, balance, congestion, queueLength, congestionTime]
//历史详情表格
const table = ref({
  header: [
    {
      title: '路口名称',
      dataIndex: 'name'
    },
    {
      title: '交通流量',
      dataIndex: 'flow',
      align: 'center',
      sorter: (a, b) => a.flow - b.flow
    },
    {
      title: '最大排队长度',
      dataIndex: 'maxQueueNum',
      align: 'center',
      sorter: (a, b) => a.maxQueueNum - b.maxQueueNum
    },
    {
      title: '平均等待时间',
      dataIndex: 'avaWaitingTime',
      align: 'center',
      sorter: (a, b) => a.avaWaitingTime - b.avaWaitingTime
    },
    {
      title: '平均停车次数',
      dataIndex: 'avaParkingNum',
      align: 'center',
      sorter: (a, b) => a.avaParkingNum - b.avaParkingNum
    },
    {
      title: '饱和度%',
      dataIndex: 'saturation',
      align: 'center',
      sorter: (a, b) => a.saturation - b.saturation
    },
    {
      title: '均衡度%',
      dataIndex: 'balance',
      align: 'center',
      sorter: (a, b) => a.balance - b.balance
    },
    {
      title: '拥堵指数',
      dataIndex: 'congestion',
      align: 'center'
    },
    {
      title: '示范区',
      dataIndex: 'area',
      align: 'center'
    }
  ],
  data: []
});
/** chart组件数据 */
const chart = ref({
  list: ['交通流量统计', '饱和度统计', '均衡度统计', '拥堵指数统计', '排队长度统计', '等待时间统计'],
  name: '',
  data: [],
  xAxis: []
});
//流量弹窗组件配置
const flowStats = reactive({
  legend:['预测值', '历史值'],
  data: [],
  colorArray: undefined
})
/** 获取表格数据 */
const getTableData = () => {
  history(queryTime.value).then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      table.value.data = data;
      if (data.length > 0) {
        currentCrossingId.value = data[0].id;
        getChartData();
      }
    }
  });
};

/** 切换chart */
const changeChart = (index) => {
  if (index === currentChartIndex.value) return;
  currentChartIndex.value = index;
  getChartData();
};

/** 获取chart数据 */
const getChartData = () => {
  const index = currentChartIndex.value;
  chart.value.serieName = chart.value.list[index];
  const request = requestArr[index];
  const { startTime, endTime } = queryTime.value;
  const data = {
    startTime,
    endTime,
    crossing: currentCrossingId.value
  };
  request(data).then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      chart.value.xAxis = data.map(item => { return item.timePoint; });
      chart.value.data = data.map(item => item.value);
    }
  });
};
/**关闭交通流量弹窗 */
const closeFlowModel = () =>{
  refFlowModel.value.setVisible(false);
}
/** 获取交通流量历史值和预测值 */
const getFlowData = async ({areaCode, crossingId}) =>{
  const hisRequest = volumeHis({areaCode, crossing: crossingId});
  const preRequest = volumePre({areaCode, crossing: crossingId});
  axios.all([hisRequest, preRequest]).then(([hisRes, preRes])=>{
    if(hisRes['retCode'] === '0000_0'&& preRes['retCode'] === '0000_0'){
      const hisData = (hisRes['data']||[]).map(({timePoint, value}) =>{return{name: timePoint, value}});
      const preData = (preRes['data']||[]).map(({timePoint, value}) =>{return{name: timePoint, value}});
      flowStats.data = [hisData, preData];
    }
  })
}
getTableData();

/** 表格行点击事件 */
const rowClick = (row) => {
  getChartData();
  refFlowModel.value.setVisible(true);
  getFlowData(row);
};
onMounted(()=>{
  refFlowModel.value.setVisible(false);
})
</script>
<style lang="less" scoped>
.table {
  width: 100%;
  height: 62%;
  padding: 1.25rem 1.75rem;
}
.table_content {
  width: 100%;
  height: 100%;
}

.line {
  width: 100%;
  height: 38%;
}
.chart_tab {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 3.625rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.chart_tab > li {
  padding: 0 1.25rem;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 1.25rem;
}
.chart_tab > li.checked {
  color: white;
  font-weight: bold;
}
.chart_tab > li:nth-child(1) {
  padding: 0 1.25rem 0 0;
}
.chart_content {
  width: 100%;
  height: calc(100% - 3.625rem + 2px);
}
.divider {
  height: 1.25rem;
  width: 0;
  border-left: 1px solid var(--extrudeColor);
}
.close {
  position: absolute;
  top: -1.875rem;
  right: 0.625rem;
  cursor: pointer;
  font-weight: bold;
}
</style>
